fix (label): label weight and padding for InputField and Label components by paanSinghCoder · Pull Request #705 · raystack/apsara

paanSinghCoder · 2026-03-16T07:43:18Z

Description

fix (InputField): consistent container gap between label, input-field and helperText
fix (Label): medium weight to match design

Type of Change

How Has This Been Tested?

Manual

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation (.mdx files)
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works

Summary by CodeRabbit

Style
- Adjusted container spacing and padding in input field components for improved layout.
- Increased font weight for label text across all size variants for enhanced visual emphasis.

vercel · 2026-03-16T07:43:23Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 16, 2026 7:43am

coderabbitai · 2026-03-16T07:43:38Z

📝 Walkthrough

Walkthrough

These changes adjust spacing, typography, and padding properties across two CSS component modules. Container gaps are increased, label font weights are enhanced, and helper text padding is removed for refined visual spacing.

Changes

Cohort / File(s)	Summary
Input Field Styling `packages/raystack/components/input-field/input-field.module.css`	Container gap increased, font-style added to label, helper-text top padding removed, labelContainer bottom padding removed.
Label Styling `packages/raystack/components/label/label.module.css`	Added medium font-weight to label size variants (.label-small, .label-medium, .label-large).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

Hopping through pixels with spacing so keen, 🐰
Labels grow bolder, the finest we've seen,
Gaps widen gracefully, padding retreats,
Our CSS burrow now perfectly meets! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: fixing label weight and padding in both InputField and Label components, which aligns with the actual modifications made to the CSS files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/input-label-styling

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/raystack/components/input-field/input-field.module.css (1)
1-1: ⚠️ Potential issue | 🟠 Major

Review text-area.module.css for spacing and label styling alignment.

The warning comment is valid: measurable inconsistencies exist between the files. Compare:

Container gap: input-field uses var(--rs-space-2) while text-area uses var(--rs-space-1)

Label container: text-area includes padding-bottom: var(--rs-space-2), input-field does not

Verify these spacing differences are intentional; if the PR changes intent to bring both components closer to a unified spacing model, text-area.module.css should be updated for consistency.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/input-field/input-field.module.css` at line 1,
The spacing between input-field and text-area is inconsistent:
input-field.module.css uses gap: var(--rs-space-2) and lacks label container
padding, while text-area.module.css uses gap: var(--rs-space-1) and includes
padding-bottom: var(--rs-space-2). Decide on the unified spacing model and make
matching changes — either update text-area.module.css to use gap:
var(--rs-space-2) and remove or align padding-bottom on the label container, or
update input-field.module.css to use var(--rs-space-1) and add padding-bottom:
var(--rs-space-2) to its label container — ensuring both files use the same gap
variable and the label container padding is consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/raystack/components/input-field/input-field.module.css`:
- Line 1: The spacing between input-field and text-area is inconsistent:
input-field.module.css uses gap: var(--rs-space-2) and lacks label container
padding, while text-area.module.css uses gap: var(--rs-space-1) and includes
padding-bottom: var(--rs-space-2). Decide on the unified spacing model and make
matching changes — either update text-area.module.css to use gap:
var(--rs-space-2) and remove or align padding-bottom on the label container, or
update input-field.module.css to use var(--rs-space-1) and add padding-bottom:
var(--rs-space-2) to its label container — ensuring both files use the same gap
variable and the label container padding is consistent.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d6a37ec4-c28a-4d8f-8ee0-c32858de5324

📥 Commits

Reviewing files that changed from the base of the PR and between 600819e and f1627ec.

📒 Files selected for processing (2)

packages/raystack/components/input-field/input-field.module.css
packages/raystack/components/label/label.module.css

fix (label): label weight and padding

f1627ec

rohanchkrabrty approved these changes Mar 16, 2026

View reviewed changes

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

paanSinghCoder merged commit f95eb08 into main Mar 17, 2026
5 checks passed

paanSinghCoder deleted the fix/input-label-styling branch March 17, 2026 03:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix (label): label weight and padding for InputField and Label components#705

fix (label): label weight and padding for InputField and Label components#705
paanSinghCoder merged 1 commit intomainfrom
fix/input-label-styling

paanSinghCoder commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Mar 16, 2026

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

paanSinghCoder commented Mar 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

How Has This Been Tested?

Checklist:

Summary by CodeRabbit

Uh oh!

vercel bot commented Mar 16, 2026

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

paanSinghCoder commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading